<template>
  <h3>setup</h3>
  <p>{{ count }}</p>
  <button @click="fn">btn</button>
</template>

<script>
// ref用于定义响应式数据
import { ref } from "vue";
export default {
  // beforeCreate() {
  //   console.log("beforeCreate", this);
  // },

  // setup函数是整一个组合api的入口
  // setup也是生命周期，是会自动执行
  // 执行时机是最早执行，里面是没有this的
  setup() {
    // let count = 5;
    // 如果想要响应式，需要使用ref方法
    const count = ref(5);
    const fn = () => {
      count.value++;
      // console.log(count);
    };

    // setup必须有一个return，只有return里面的内容才可以在模板里面使用
    return { count, fn };
  },

  // data() {
  //   return {
  //     count: count.value
  //   }
  // }
};
</script>
